<template>
  <div class='voucher-detail first-box pr'>
    <img :src="imgs.bac1" alt="">

    <div class="pa head">
      <p class="money color-gold"><span>￥</span><span>{{info.money}}</span></p>
      <p class="title">{{info.title}}</p>
    </div>

    <div class="pa body box-size">
      <p>卡券编号：{{info.cardnumber}}</p>
      <p>到期时间：{{info.endtime}}</p>
      <p>使用条件：{{info.condition}}元以上</p>
    </div>

    <div class="pa box-size foot">
      <p class="title">
        <span class="line"></span>
        <span class="dot"></span>
        <span class="title">分享中心</span>
        <span class="dot"></span>
        <span class="line"></span>
      </p>
      <p class="rule">
        <!-- <span>①、最多分享5位好友</span>
        <span>②、分享返利1元</span>
        <span>③、消费返利2元</span> -->
        {{info.instructions}}
      </p>
    </div>

    <Btn class="pa btn" :buttonData="buttonData"></Btn>
  </div>
</template>
<script>
import Btn from '../../../common/button.vue'
export default {
  components: {Btn},
  name: "",
  data() {
    return {
      showModel:false,
      imgs:{
        bac1:require('../../../../assets/img/vip/voucher/bac3.png'),
        pointer:require("../../../../assets/img/vip/voucher/point.png")
      },
      info:{
        money:"",
        title:"",
        cardnumber:"",
        endtime:"",
        condition:"",
        shareLevel:"",
        instructions:"",
      },

      buttonData:[
        {
          label:"领取",
          click:this.save
        }
      ],

      id:"",

      canGet:true

    };
  },
  methods: {
    save(){
      this.tologin({
        id:this.id,
        organizationId:sessionStorage.getItem("orgId"),
        code:sessionStorage.getItem("myCode"),
      })
    },

    tologin(params){
      if(!this.canGet)return
      this.canGet=false
      _g.apiPost("couponApp/shareLogin.do",params).then(res=>{
        setTimeout(()=>{
          this.canGet=true
        },1000)
        if(res.status==0){
          // sessionStorage.removeItem("myCode")
          _g.toMessage({status:0,msg:"领取成功"})
        }else if(res.status==13){
          _g.toMessage({status:13,msg:res.msg})
        }else{
          this.$router.push("/member/voucher/attention")
        }
      })
    },

    getDetail(){
      var that=this
      this.id=_g.getRouterParams(this).id
      var params={
        id:_g.getRouterParams(this).id
      }
      if(sessionStorage.getItem("cardInfo")){
        this.$set(this,"info",JSON.parse(sessionStorage.getItem("cardInfo")))
        getCode()
      }else{
        _g.apiPost("couponApp/getUserCouponInfo.do",params).then(res=>{
          sessionStorage.setItem("orgId",res.data.organizationId)
          var obj={
            money:res.data.couponValue,
            title:res.data.couponName,
            cardnumber:res.data.codeNum,
            endtime:res.data.validTill,
            condition:res.data.consumptionFull,
            shareLevel:res.data.shareLevel,//分享等级
            instructions:res.data.instructions,//使用说明
          }
          this.$set(this,"info",obj)
          sessionStorage.setItem("cardInfo",JSON.stringify(obj))
        }).then(()=>{
          if(location.href.indexOf("?code=")>-1){
            getCode()
          }else{
            var url=backPath+"member/voucher/shareInfo/"+this.id
            wxUserInfo(url,that.id)
          }
        })
      }
    },

    getItem(){
      var url=window.location.href
      _g.setShare(url)
    }
  },
  created() {
    this.$nextTick(()=>{
      _g.orderList([this.getDetail,this.getItem])
    })
  }
};
</script>
<style lang="scss" scoped>
.voucher-detail {
  background: linear-gradient(left bottom,#EE9700,#F5DC00);
  background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
  padding: 15px;
  box-sizing: border-box;
  text-indent: 0;
  overflow: auto!important;

  >img{
    width: 100%;
    height: 100%;
  }
  .head{
    top: 7%;
    text-align: center;
    width: calc(100% - 30px);
    
    z-index: 5;

    .money{
      font-size: 25px;

      span:nth-child(2){
        font-size: 50px;
      }
    }
    .title{
      font-size: 20px;
      color: #999;
    }
  }
  .body{
    font-size: 14px;
    color: #999;
    top: 35%;
    width: calc(100% - 60px);
    left: 30px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 5%;

    p{
      display: inline-block;
      width: 80%;
      margin-left: 10%;
      margin-bottom: 5px;
    }
    p:nth-child(3){
      margin-bottom: 0;
    }
  }
  .foot{
    top: 53%;
    color: #999;
    width: calc(100% - 30px);
    

    .title{
      text-align: center;
    }

    .dot{
      display: inline-block;
      width: 0;
      padding: 3px;
      border-radius: 50%;
      background-color:#FC9522; 
      transform: translateY(-2px)
    }
    .line{
      display: inline-block;
      width: 70px;
      height: 1px;
      background-color:#FC9522; 
      transform: translateY(-4px)
    }

    .rule{
      width: 70%;
      font-size: 12px;
      margin-left: 15%;
      margin-top: 10px;
      line-height: 20px;
      max-height: 60px;
      overflow-y: auto;

      span{
        display: block;
        margin-bottom: 5px;
      }
    }

    
  }

  .btn{
    width: calc(100% - 60px);
    left: 30px;
    top: 75%;
  }
  .last{
    top: 83%;
    width: calc(100% - 30px);
    text-align: center;

    span{
      text-decoration: underline;
      font-size: 16px;
    }
    span:active{
      opacity: .6;
    }
  }
}

</style>